<template>
  <div>
    <!-- 标签栏 -->
    <div class="header">
      <el-menu
        mode="horizontal"
        text-color="#aaa"
        default-active="/manualcheck"
        active-text-color="#26B2F3" router>
          <el-menu-item :index="'/manualcheck?date=' + getYesterdayDate()">
            <template slot="title"> 昨天
            </template>
          </el-menu-item>
          <el-menu-item :index="'/manualcheck'">今天</el-menu-item>
          <div >
            显示日期：{{currentDate}}
          </div>
      </el-menu>

    </div>
    <!-- <el-breadcrumb separator="\\">
      <el-breadcrumb-item > 当前显示日期： </el-breadcrumb-item>
      <el-breadcrumb-item>{{ currentDate }} </el-breadcrumb-item>
    </el-breadcrumb> -->
  <div class="tip" v-if="bNameList.length == 0">暂无数据</div>
  <el-card>
    <div class="content" type="flex">
      <el-row :gutter="10">
        <!-- bNameList公司列表显示 -->
        <el-col v-for="(bname, index) in bNameList" :key="index" :span="6">
          <div class="grid-content" @click.prevent="modifyDetailBnames(bname)">
            <div class="card-header">
              <span>{{ bname }}</span>
            </div>
          </div>

        </el-col>
      </el-row>
    </div>

    <!-- 底部页码显示 -->
    <el-pagination
      @current-change="handleCurrentChange"
      :current-page="queryInfo.pageNum"
      :page-size="queryInfo.pageSize"
      layout="total, prev, pager, next, jumper"
      :total="totalSize">
    </el-pagination>
  </el-card>

  <!-- 点击卡片之后的对话框 -->
   <!-- <el-dialog
  :visible.sync="dialogVisible"
  @close="handleClose"
  fullscreen
  :width="dialogWidth[currentInterveneIndex]"
  :close-on-click-modal="false"
  :show-close=false> -->
  <el-dialog
  :visible.sync="dialogVisible"
  @close="handleClose"
  :width="dialogWidth[currentInterveneIndex]"
  :close-on-click-modal="false"
  :show-close=false>
  <!-- 设置对话框title样式 -->
   <template slot="title">
             <div class='titleZise'><span class="companyName"> 代账公司：{{ currentBName }}</span> <span class="companyName">电话: {{currentIntervene.phoneNumber}}</span> <span class="companyName" id="remainIntervene"> 剩余票据: {{ ticketTotalSize - 1 }} </span></div>
  </template>
  <div class="picture">
   <!-- <el-carousel v-loading="loading" trigger="click" :loop='autoplay' :autoplay='autoplay' :height="pictureHeight[currentInterveneIndex]" indicator-position="none" @change="ticketChange" ref="pictureItem"> -->
    <div class="img_center">
      <!-- <el-carousel-item v-for="index in ticketTotalSize" :key="index"> -->
      <!-- 图片显示区域 onload将dialog宽度调整到图片适应大小-->

      <!-- <img :src="'data:image/jpg;base64,' + imageData()" @load="onload"/> -->
      <img :src="imageData()" @load="onload"/>
<!-- 
      </el-carousel-item> -->
    </div>
    <!-- </el-carousel> -->
    </div>
    <div>
      <!-- 表单区域 -->
      <div id="formHeader">
     <span class="interveneType" v-if="currentIntervene.type == 0"> 票据类型： 发票 </span>
      <span class="interveneType" v-if="currentIntervene.type == 1"> 票据类型： 回单 </span>
      <span class="interveneType" v-if="currentIntervene.type == 2"> 票据类型： 特殊票据 </span>
      <span class="interveneType">cName: {{currentIntervene.cName}} </span>
      <el-tooltip class="item" effect="dark" content="复制cName到剪切板" placement="top">
      <el-button style="{margin-right: 12px; margin: 8px;}" type="primary" v-clipboard:copy="currentIntervene.cName" v-clipboard:success="onCopy" v-clipboard:error="onError"><i class="el-icon-document-copy"></i></el-button> 
      </el-tooltip>
      </div>
      <el-form v-loading="loading" :model="currentIntervene" status-icon ref="ticketsForm" label-position="top" class="demo-ruleForm">
<el-row :gutter="10">
  <el-col :span="6">
      <el-form-item  v-if="currentIntervene.type == 0 || (currentIntervene.type == 2 && currentIntervene.receiptType == 1)" prop="id">
      <span slot="label"  style="{padding-botom: 0}">
          <span class="span-box id">发票号码
             <i class="el-icon-info ico-pre"></i>
        </span>
        </span>
        <el-input v-model="currentIntervene.identifyId"></el-input>
      </el-form-item>
  </el-col>
    <el-col :span="6">
      <el-form-item v-if="currentIntervene.type == 0 || (currentIntervene.type == 2 && currentIntervene.receiptType == 1)" label="发票类型">
      <span slot="label" style="{padding-botom: 0}">
          <span class="span-box" >发票类型
          <span class="label"></span>
             <i class="el-icon-s-claim ico-pre"></i>
          </span>
        </span>
        <el-select size="medium"  v-model="currentIntervene.receiptType" placeholder="请选择">
        <el-option
        v-for="item in receiptTypes"
       :key="item.value"
       :label="item.label"
       :value="item.value">
      </el-option>
      </el-select>
      </el-form-item>
      </el-col>
  <el-col :span="6">
      <el-form-item v-if="currentIntervene.type == 0 || (currentIntervene.type == 2 && currentIntervene.receiptType == 1)" label="购买方" prop="buyer">
        <span slot="label" style="{padding-botom: 0}">
          <span class="span-box buyer">购买方
          <span class="label"></span>
             <i class="el-icon-s-order ico-pre"></i>
          </span>
        </span>
       <el-input v-model="currentIntervene.buyer"></el-input>
      </el-form-item>
      <el-form-item v-if="currentIntervene.type == 1" label="打款方" prop="remitter">
          <span slot="label" style="{padding-botom: 0}">
          <span class="span-box remitter">打款方
          <span class="label"></span>
             <i class="el-icon-s-finance ico-pre"></i>
          </span>
        </span>
        <el-input v-model="currentIntervene.remitter"></el-input>
      </el-form-item>
  </el-col>
  <el-col :span="6">
      <el-form-item v-if="currentIntervene.type == 0 || (currentIntervene.type == 2 && currentIntervene.receiptType == 1) " label="销售方" prop="seller">
        <span slot="label" style="{padding-botom: 0}">
          <span class="span-box seller">销售方
          <span class="label"></span>
             <i class="el-icon-s-shop ico-pre"></i>
          </span>
        </span>
        <el-input v-model="currentIntervene.seller"></el-input>
      </el-form-item>
      <el-form-item v-if="currentIntervene.type == 1" label="收款方" prop="payee">
       <span slot="label" style="{padding-botom: 0}">
          <span class="span-box payee">收款方
          <span class="label"></span>
             <i class="el-icon-s-custom ico-pre"></i>
          </span>
        </span>
        <el-input v-model="currentIntervene.payee"></el-input>
      </el-form-item>
  </el-col>

  <el-col :span="6">
      <el-form-item label="金额" prop="amount" v-if="currentIntervene.type == 1">
       <span slot="label" style="{padding-botom: 0}">
          <span class="span-box amount">金额
          <span class="label"></span>
             <i class="el-icon-s-marketing ico-pre"></i>
          </span>
        </span>
        <el-input v-model="currentIntervene.keyInfoList[0].amount"></el-input>
      </el-form-item>
  </el-col>

  <el-col :span="6">
      <el-form-item prop="remarks" v-if="currentIntervene.type == 0 || currentIntervene.type == 1 || (currentIntervene.type == 2 && currentIntervene.receiptType == 1)">
       <span class="item-header" slot="label" style="{padding-botom: 0}">
          <span class="span-box remarks">备注
          <span class="label"></span>
             <i class="el-icon-s-management ico-pre"></i>
          </span>
        </span>
        <el-input v-model.number="currentIntervene.remarks"></el-input>
      </el-form-item>
  </el-col>
  <el-col :span="6">
      <el-form-item label="日期" prop="date" v-if="currentIntervene.type == 0 || currentIntervene.type == 1 || (currentIntervene.type == 2 && currentIntervene.receiptType == 1)">
      <span slot="label" style="{padding-botom: 0}">
          <span class="span-box date">日期
          <span class="label"></span>
             <i class="el-icon-s-claim ico-pre"></i>
          </span>
        </span>
      <el-date-picker
        v-model="currentIntervene.date"
        align="left"
        type="date"
        value-format="yyyy-MM-dd"
        placeholder="选择日期">
    </el-date-picker>
      </el-form-item>
   </el-col>
  <!-- 特殊票据 -->
    <el-col :span="6">
      <el-form-item v-if="currentIntervene.type == 2 && currentIntervene.receiptType != 1" prop="templateSign" label="票据类型">
        <span slot="label" style="{padding-botom: 0}">
          <span class="span-box templateSign">票据类型
          <span class="label"></span>
             <i class="el-icon-s-claim ico-pre"></i>
          </span>
        </span>
        <el-select size="medium"  v-model="currentIntervene.templateSign" placeholder="请选择">
        <el-option
          v-for="item in templateSignTypes"
          :key="item.value"
          :label="item.label"
          :value="item.value">
          </el-option>
        </el-select>
    </el-form-item>
  </el-col>
  <el-col :span="6">
      <el-form-item v-if="currentIntervene.type == 2 && currentIntervene.receiptType != 1" label="票据号码">
        <span slot="label" style="{padding-botom: 0}">
          <span class="span-box">票据号码
          <span class="label"></span>
             <i class="el-icon-s-order ico-pre"></i>
          </span>
        </span>
       <el-input v-model="currentIntervene.identifyId"></el-input>
      </el-form-item>
  </el-col>
  <el-col :span="6">
      <el-form-item v-if="currentIntervene.type == 2 && currentIntervene.receiptType != 1" label="票据金额">
        <span slot="label" style="{padding-botom: 0}">
          <span class="span-box">票据金额
          <span class="label"></span>
             <i class="el-icon-s-shop ico-pre"></i>
          </span>
        </span>
        <el-input v-model="currentIntervene.keyInfoList[0].amount"></el-input>
      </el-form-item>
  </el-col>
  </el-row>
</el-form>
</div>

<!-- 多行发票 -->
<div>
  <el-row>
 <el-col :span="24" v-if="currentIntervene.type == 0 || (currentIntervene.type == 2 && currentIntervene.receiptType == 1)">
    <el-table :data="currentIntervene.keyInfoList"  border style="width: 100%" highlight-current-row :header-cell-class-name="problemFieldTableTips">
		  <el-table-column v-for="(v,i) in keyInfoListItems" :prop="v.field" :label="v.title" :key="i">
     <template slot-scope="scope">
		  <el-input size="mini" :rows="2" placeholder="请输入内容" v-model="scope.row[v.field]">
		  </el-input> 
		 </template>
     </el-table-column>
      <el-table-column label="操作" width="100">
        <template slot-scope="scope">
      <span class="el-tag el-tag--danger el-tag--mini" style="cursor: pointer;" @click="pwdChange(scope.row,scope.$index,false)">
            删除
      </span>
          <!-- <span class="el-tag el-tag--mini" style="cursor: pointer;" @click="pwdChange(scope.row,scope.$index,false)">
            取消
          </span> -->
        </template>
      </el-table-column>
    </el-table>
  </el-col>
  <el-col v-if="currentIntervene.type == 0" :span="24">
	  <div class="el-table-add-row" style="width: 360" @click="addMasterUser()"><span>+ 添加</span></div>
	</el-col>
  </el-row>
  </div>
<div slot="footer" class="dialog-footer">
  <el-button @click="dialogVisible = false">取 消</el-button>
  <el-button type="primary" @click="submitCurrentIntervene">确 定</el-button>
  <el-button type="danger" @click="deleteCurrentTip">删 除</el-button>
</div>
  </el-dialog>
  <el-dialog
  title="提示"
  :visible.sync="deleteConfirmVisible"
  width="30%"
  :before-close="handleDeleteConfirmClose">
  <span>你确认删除当前票据吗???</span>
  <span slot="footer" class="dialog-footer">
    <el-button @click="deleteConfirmVisible = false">取 消</el-button>
    <el-button type="primary" @click="deleteConfirm">确 定</el-button>
  </span>
</el-dialog>
</div>
</template>
<script>
export default
{
  data(){
    return {
      receiptTypes:[
        {
          label: "增值税专用发票",
          value: 0
        },
        {
          label: "增值税普通发票",
          value: 1
        }
      ],
      templateSignTypes:[
        {
          label: "通行证发票",
          value: "toll_invoice"
        },
        {
          label: "火车票",
          value: "train_ticket"
        }
      ],
      loading: true,
      timer: null, //定时刷新页面
      interval: 300,
      url: '',
      dialogVisible: false,
      deleteConfirmVisible: false,
      currentDate: '',
      bNameList:[],
      totalSize: 0,
      ticketTotalSize:0,
      queryInfo:{
        date: "",
        pageNum: 1,
        pageSize: 20
      },
      currentBName:"",
      autoplay:false,
      queryTicketsInfo:{
        date: '',
        bName: '',
        pageNum:  1,
        pageSize: 1
      },
      currentInterveneIndex: 0,
      interveneList:[],
      dialogWidth: [],
      pictureHeight: [],
      currentIntervene:{
        id:0,
        identifyId: "",
        type:0,
        fileId:"",
        phoneNumber: "",
        bName: "",
        cName: "",
        month: "",
        buyer: "",
        seller: "",
        remitter: "",
        payee: "",
        keyInfoList:[
          {
            no:1,
            goodsType: "",
            amount: 0.0,
            taxAmount: 0.0
          }
        ],
        receiptType: 0,
        remarks: "",
        date: "",
        templateSign:'',
        problemFields:[],
      },
      keyInfoListItems:[
        { field: "no", title: "行次", width:120},
        { field: "goodsType", title: "货物类型", width: 120},
	    	{ field: "amount", title: "行次金额", width: 120},
        { field: "taxAmount", title: "行次税额", width: 120 },
      ],
      tmpIndex: 0,
    }
  },
    methods:{
      submitAlert(){
         this.$alert('"(收/买)/(卖/付款)方与cName不匹配， 无法提交"', '', {
          confirmButtonText: '确定',
          callback: action => {

          }
        });
      },
      imageData(){
        if (this.interveneList.length == 0){
          return "";
        } else {
          return this.interveneList[0].fileUrl
        }
      },
      setTimer(){
        this.timer = setInterval(async () =>{
          await this.getBNameList()
          if (this.bNameList.length == 0){
            this.interval = 5;
          }
        },1000* this.interval);
      },
      resetTimer(){
        clearInterval(this.time);
        this.timer = setInterval(() =>{
           this.getBNameList()
        },1000* Interval);
      },
      getTodayDate(){
        var day1 = new Date();
        day1.setTime(day1.getTime());
        var s1 = day1.getFullYear()+"-" + this.getMonth(day1) + "-" + this.getDay(day1);
        return s1
      },
      getMonth(day){
        var n = day.getMonth() + 1;
        return n < 10 ? '0' + n: '' + n;
      },
      getDay(day){
        var n = day.getDate();
        return n < 10 ? '0' + n: '' + n;
      },
      getYesterdayDate(){
        var day2 = new Date();
        day2.setTime(day2.getTime() - 3600 * 1000 * 24);
        var s2 = day2.getFullYear()+ "-" + this.getMonth(day2) + "-" + this.getDay(day2);
        return s2
      },
      modifyDetailBnames(bname){
        this.currentBName  = bname;
        console.log("dialogvisible:", this.dialogVisible)
        this.dialogVisible = true;
      },
      async getBNameList(){
        this.queryInfo.date = this.currentDate;
        const res = await this.$http.get('/intervene/getBNameList', {params: this.queryInfo})
        if (res.code !== 0) return this.$message.error(res.message);
        this.totalSize = res.data.totalSize;
        this.bNameList = res.data.bNameList;
      },
      async getTicketsList(){
      this.queryTicketsInfo.date = this.currentDate;
      this.queryTicketsInfo.bName = this.currentBName;
      this.queryTicketsInfo.pageNum = this.queryTicketsInfo.pageNum;
      this.queryTicketsInfo.pageSize = this.queryTicketsInfo.pageSize;
      this.loading = true;
        const res = await this.$http.get('/intervene/getInterveneListByBName',{params: this.queryTicketsInfo}).then(res=>{
        if (res.code !== 0 || res.data.totalSize == 0) return this.$message.error("当前公司无可校验发票或者获取校验发票失败",res.message);
          this.loading = false;
          this.interveneList = res.data.interveneList;
          this.ticketTotalSize = res.data.totalSize;
          this.ticketChange(0, 0);
        }).catch(err=>{
          return this.$message.error("获取校验发票失败",err);
        })

      },
      //页码改变时候重新获取公司名称
      handleCurrentChange(page){
        this.queryInfo.pageNum = page;
        this.getBNameList();
      },
      handleClose(){
        this.dialogVisible = false;
        this.currentInterveneIndex = 0;
      },
      onload(e){
         const img = e.target;
         let width = 0;
         let widthrate = 0;
         if (img.fileSize > 0  || (img.width > 1 && img.height > 1)) {
           width = img.width;
           if (width < 800) {
             width = 800;
             widthrate = 1;

           } else{
             widthrate = width / 800;
            width = width / widthrate;
            img.width = img.width / widthrate - 40;
            img.heigth = img.height / widthrate;
           }
        }
        this.dialogWidth.push(width + "px");
        this.pictureHeight.push(img.height/widthrate + "px");
          this.currentInterveneIndex ++;
          if (this.currentInterveneIndex == this.interveneList.length) {
            this.currentInterveneIndex = 0;
          }

      },
      ticketChange(currentIndex, previousIndex){
        this.currentIntervene.id = this.interveneList[0].id;
        this.currentIntervene.type = this.interveneList[0].type;
        this.currentIntervene.bName = this.interveneList[0].bName;
        this.currentIntervene.cName = this.interveneList[0].cName;
        this.currentIntervene.month = this.interveneList[0].month;
        this.currentIntervene.buyer = this.interveneList[0].buyer;
        this.currentIntervene.seller = this.interveneList[0].seller;
        this.currentIntervene.remitter = this.interveneList[0].remitter;
        this.currentIntervene.payee = this.interveneList[0].payee;
        this.currentIntervene.fileId = this.interveneList[0].fileId;
        if (this.interveneList[0].keyInfoList.length == 0){
          this.currentIntervene.keyInfoList = this.interveneList[0].keyInfoList;
          this.currentIntervene.keyInfoList.push({
            no:1,
            goodsType: "",
            amount: 0.0,
            taxAmount: 0.0
          });
        } else {
          this.currentIntervene.keyInfoList = this.interveneList[0].keyInfoList;
        }
        // this.currentIntervene.amount = this.interveneList[currentIndex].amount;
        // this.currentIntervene.taxAmount = this.interveneList[currentIndex].taxAmount;
        this.currentIntervene.remarks = this.interveneList[0].remarks;
        this.currentIntervene.date = this.interveneList[0].date;
        this.currentIntervene.identifyId = this.interveneList[0].identifyId;
        this.currentIntervene.phoneNumber = this.interveneList[0].phoneNumber;
        this.currentIntervene.receiptType = this.interveneList[0].receiptType;
        this.currentIntervene.templateSign = this.interveneList[0].templateSign;
        this.currentIntervene.problemFields = this.interveneList[0].problemFields;
        this.currentIntervene.problemFields.forEach(field => {
          try{
            document.querySelector("." + field).classList.add('red-span');
          } catch(error){
            
          }
          
        })
      },
      //确定上传
      submitCurrentIntervene(){
        this.$refs.ticketsForm.validate(async valid => {
          if (!valid) return this.submitAlert()
            if (this.currentIntervene.type == 0 &&
            this.currentIntervene.cName !== this.currentIntervene.buyer &&
             this.currentIntervene.cName !== this.currentIntervene.seller) {
               return this.submitAlert()
            }
            if (this.currentIntervene.type == 1 &&
            this.currentIntervene.cName !== this.currentIntervene.remitter &&
             this.currentIntervene.cName !== this.currentIntervene.payee) {
               return this.submitAlert()
            }
            const res = await this.$http.post("/intervene/saveInterveneInfo", this.currentIntervene);
            if (res.code !== 0) {
              return this.$message.error("修改请求未成功：", res.message);
            }
          this.currentIntervene.problemFields.forEach(field => {
            try{document.querySelector("." + field).classList.remove('red-span');
            }catch(error){

            }
          })
            this.$message.success("修改请求成功");
            this.getNext();
        })

      },
      //删除当前显示的票据
      deleteCurrentTip(){
        this.deleteConfirmVisible = !this.deleteConfirmVisible;
      },
      async deleteConfirm(){
        const res = await this.$http.post("/intervene/deleteInterveneInfo", this.currentIntervene).then(res=>{
          if(res.code == 0 ){
            this.$message.success("删除成功");
            this.deleteConfirmVisible = !this.deleteConfirmVisible;
            this.getNext();
          }  else {
            this.deleteConfirmVisible = !this.deleteConfirmVisible;
            return this.$message.error("删除失败: ", res.message);
          }
        }).catch(err => {
          this.deleteConfirmVisible = !this.deleteConfirmVisible;
        });
      },

    //utils
      onCopy(e){ 　　 // 复制成功
　　　　this.$message({
　　　　　　message:'复制成功！',
　　　　　　type:'success'
　　　　})
　　},
　　onError(e){　　 // 复制失败
　　　　this.$message({
　　　　　　message:'复制失败！',
　　　　　　type:'error'
　　　　})
　　},
    pwdChange(row, index, cg) {
			//删除
      this.currentIntervene.keyInfoList.splice(index,1)
    },
    addMasterUser(){
      let element = this.currentIntervene.keyInfoList[this.currentIntervene.keyInfoList.length-1];
      console.log("element:", element);
      let j = {
        no: element.no? element.no + 1: this.currentIntervene.keyInfoList.length + 1,
        amount: 0,
        goodsType: "",
        taxAmount: 0
      }
      this.currentIntervene.keyInfoList.push(j)
    },
    getNext(){
      if (this.ticketTotalSize - 1 !== 0) {
        this.getTicketsList();  
      } else {
        this.dialogVisible = false;
        this.getBNameList();
      }
    },
    handleDeleteConfirmClose(){
      this.deleteConfirmVisible = !this.deleteConfirmVisible;
    },
    problemFieldTableTips({row, column, rowIndex, columnIndex}){
      if (this.currentIntervene.problemFields.findIndex((problemField) =>{return problemField == column.property}) != -1){

        return "redheader";
      }else {
        return '';
      }
    }
    },

    created(){
      if (this.$route.query.date){
        this.currentDate = this.$route.query.date;
      } else {
      this.currentDate = this.getTodayDate();
      }
      this.getBNameList();
      //定时刷新每5分钟
      this.setTimer(300);

    },
    beforeDestroy() {    //页面关闭时清除定时器
      clearInterval(this.timer);
    },

    watch:{
      async dialogVisible(){
       if (this.dialogVisible){
        await this.getTicketsList();
      //默认显示第一张图片
      // this.$refs.pictureItem.setActiveItem(0);
      //默认加载第一张票据
      this.ticketChange(0, 0);
       }else{
         location.reload();
       }
      },
    $route(to, from) {
   	//监听路由参数变化
      if (this.$route.query.date){
        this.currentDate = this.$route.query.date;
      } else {
      this.currentDate = this.getTodayDate();
      }
      this.getBNameList();
      //定时刷新每5分钟
      this.setTimer(300);
    }
  }
}
</script>

<style lang="less" scoped>
.header{
  display: flex;
  justify-content: space-between;
  .el-menu{
    // display: flex;
    width: 100%;
    // justify-content: space-between;
    div{
    font-size: 18px;
    color: #fff;
    display:flex;
    height: 100%;
    margin-right:10px;
    float: right;
    align-items: center;
    text-align: center;
  }
  }
  
}

.el-breadcrumb{
  margin: 20px;
}
// .el-input{
//   border: 1px solid #8D8D8D;
// }
.content{
  .el-row {
    margin-bottom: 10px;
    margin-top: 10px;
    &:last-child {
      margin-bottom: 0;
    }
  }
  .el-col {
    border-radius: 4px;
    margin-bottom: 10px;
    // margin-left: 1px;
    // margin-right:1px;
    background-color: white;
  }

  .grid-content {
    box-sizing: border-box;
    border: 1px solid ;
    box-shadow: 1px 1px 1px 1px #BDBDBD;
    background: whitesmoke;
    border-radius: 4px;
    margin: 0;
    padding: 0;
    min-width: 90px;
    min-height: 110px;
    display:flex;
        .card-header{
        height:50px;
        // margin: 0;
        // padding: 0;
        background-color:#DDDDDD;
        width:100%;
        display: flex;
        align-items: center;
        justify-content: center;

          >span{
            padding-left: 8px;
            min-width: 70px;
            font-family:"Microsoft YaHei";
            color:black;
            font-weight: bold;
          }
      }
  }

  .grid-content:hover{
    border: 1px solid #409DFE;
    box-shadow: 0px 0px 1px 2px #399EFD;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
}

.titleZise{
  // background:linear-gradient(
  //   145deg,
  //   #0E4174 33.3%,#177ABB 0,#177ABB 66.6%,white 0
  //   );
  background:#323241;
  padding: 8px;
  margin:0;
  font-size: 20px;
  display: flex;
  justify-content: space-between;
  font-family:"Microsoft YaHei";
  border-radius: 6px;
  >.companyName {
    color:#eee;

  }
}

#formHeader{
  width:100%;
  display: flex;
  justify-content: space-between;
  color:rgb(238, 238, 238);
  font-size:16px;
  background:#323241;
  // background:linear-gradient(
  //   145deg,
  //  #0E4174 0, gray 91.6%, #177ABB 0
  //   );
}
.interveneType{
  font-size: 16px;
  margin-left: 20px;
  width: 100%;

}
.span-box{
  font-size: 18px;
}

.red-span{
  color:red !important;
}

.el-menu{
  background: #323241;
//  background: linear-gradient(
//      145deg,
//       #DDDDDD 20%,
//        #529af8 20%;
//       #177ABB 40%,
//      #177ABB 0,
//      #0E4174 80%,
//      #021035 0
//      );
}

.el-menu{
        font-family:"Microsoft YaHei";
        font-weight: bold;
        .el-menu-item{
          font-size: 20px;
          border: gray;
        }
}

.img_center{
  border: 1px black;
  display: table-cell;
  text-align: center;
}

.subtitle{
    display: flex;
  justify-content: space-between;
}
.el-select{
  font-size:20px;
}
.el-dialog{
  flex:1;
}
.item-header{
  margin-bottom: 0;
  padding-bottom: 0;
  span{
    margin-bottom: 0;
  padding-bottom: 0;
  }
}

.el-table-add-row {
		margin-top: 10px;
		width: 100%;
		height: 34px;
		border: 1px dashed #c1c1cd;
		border-radius: 3px;
		cursor: pointer;
		justify-content: center;
		display: flex;
		line-height: 34px;
}
.tip{ 
  font-size: 16px;
  margin: 10px;
  margin-left: 40px;
}

</style>
<style lang="less">
  .redheader{
    color: red !important;
  }
</style>